<template>
	<view>
		<!-- 头部开始 -->
		<view class="header">
			<view class="titlebox">
				<image src="../../static/shop_logo.jpg" mode=""></image>
				<view class="title">
					<view>吉野家牛肉饭</view>
					<ul>
						<li>美食</li>
						<li>|</li>
						<li>午餐</li>
					</ul>
				</view>
			</view>
		</view>
		<!-- 头部结束 -->

		<view class="all">
			<!-- 时间地址开始 -->
			<view class="contentbox">
				<view class="content">
					<uni-icons type="circle" size="15" style="color: orange;"></uni-icons>
					<p>营业时间：8:00-23:00</p>
				</view>
				<view class="content">
					<uni-icons type="circle" size="15" style="color: orange;"></uni-icons>
					<p>商家地址：17号楼3单元1703</p>
				</view>
			</view>
			<!-- 时间地址结束 -->

			<!-- 商家介绍开始 -->
			<view class="introduce">
				<view class="title">商家介绍</view>
				<view class="images">
					<image src="../../static/shop1.jpg" mode="" style="margin-right: 60rpx;"></image>
					<image src="../../static/shop2.jpg" mode=""></image>
				</view>
				<view class="text">
					吉野家的名字来源于地名，日本的吉野山地区的牛肉饭最为著名，传说是12世纪时候日本名将源义经的爱妾静在掩护义经避难之时，在吉野山把制作牛肉饭的技巧交给了当地农民，于是牛肉饭成为当地的特产美味，吉野家之所以这样取名，也是为说明自己的牛肉饭正宗。
				</view>
			</view>
			<!-- 商家介绍结束 -->

			<!-- 联系电话开始 -->
			<view class="mobile">
				<view class="phone">
					<uni-icons type="phone-filled" size="30" style="color: orange; margin-left: 30rpx;"></uni-icons>
					<span>联系电话：13812345678</span>
				</view>
			</view>
			<!-- 联系电话结束 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	//头部开始 
	.header {
		background-image: url(../../static/shop_bj.png);
		background-size: 100% 100%;
		height: 554rpx;
		position: relative;

		.titlebox {
			width: 700rpx;
			height: 180rpx;
			background-color: #fff;
			border-radius: 10rpx;
			text-align: center;
			position: absolute;
			top: 502rpx;
			left: 50%;
			transform: translate(-50%);
			box-shadow: 0px 2px 10rpx 1px rgba(0, 0, 0, 0.3);
			display: flex;

			image {
				width: 98rpx;
				height: 98rpx;
				margin-top: 38rpx;
				margin-left: 38rpx;
			}

			.title {
				display: flex;
				flex-direction: column;
				align-items: center;

				view {
					font-size: 34rpx;
					color: #333333;
					margin-top: 38rpx;
					margin-left: 38rpx;
				}

				ul {
					margin-top: 10rpx;
					margin-left: -90rpx;

					li {
						display: inline;
						margin-right: 15rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}

	//头部结束

	.all {
		width: 100%;
		margin: 0 20rpx;

		// 时间地址开始
		.contentbox {
			width: 750rpx;
			height: 122rpx;
			margin: 0 auto;
			margin-top: 181rpx;
			.content {
				font-size: 30rpx;
				display: flex;
				align-items: center;
				margin-bottom: 44rpx;

				p {
					margin-left: 2%;
				}
			}
		}

		// 时间地址结束

		// 商家介绍开始
		.introduce {
			height: 528rpx;
			margin-top: 108rpx;

			.title {
				width: 680rpx;
				margin: 0 auto;
				font-size: 33rpx;
				color: #131106;
				line-height: 50rpx;
			}

			.images {
				margin: 0 auto;
				display: block;
				text-align: center;
				margin-top: 46rpx;

				image {
					width: 290rpx;
					height: 162rpx;
				}
			}

			.text {
				font-size: 28rpx;
				width: 680rpx;
				line-height: 50rpx;
				margin: 0 auto;
			}
		}

		// 商家介绍结束

		// 联系电话开始
		.mobile {
			height: 260rpx;
			margin: 0 auto;
			display: block;

			.phone {
				width: 624rpx;
				height: 135rpx;
				background-color: #f1f5f8;
				border-radius: 10rpx;
				font-size: 33rpx;
				margin: 0 auto;
				margin-top: 196rpx;
				display: flex;
				align-items: center;

				span {
					font-size: 33rpx;
					color: #141414;
					margin-left: 3%;
				}
			}
		}

		// 联系电话结束
	}
</style>